<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <title>夏振华-面试前端工程师-简历</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      background: #eee;
      margin: 20px 0;
    }

    article {
      width: 21cm;
      min-height: 29.7cm;
      background: white;
      margin: 0 auto;
      overflow: auto;
      padding: 1em;
    }
    .noLine,.noLine:hover{
      text-decoration: none;
      border: none;
      color: #666;
    }
  </style>
  <style media="print">
    body {
      margin: 0;
    }

    .page2 {
      page-break-before: always;
      margin-top: 30px;
    }
  </style>
  <style>
    body {}

    p {
      margin: .3em 0;
    }

    h1 {
      font-size: 25px;
      margin-top: 0;
    }

    h4,
    h5,
    h6 {
      font-weight: normal;
    }

    ol,
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    strong {
      font-weight: normal;
      color: #f60;
    }

    a {
      color: #999;
      text-decoration: none;
      border-bottom: 1px solid;
    }

    p,
    li {
      color: #666;
    }

    strong {
      font-weight: normal;
    }

    h3,
    h4,
    h5,
    h6 {
      margin: 0;
    }

    .bio {
      position: relative;
    }

    .bio img {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>

  <style>
    .projects {}

    .projects p {
      color: #666;
    }

    .projects strong {
      color: #f60;
    }

    .projects>ol {
      margin-top: 0;
      list-style-position: inside;
      padding: 0;
    }

    .projects>ol>li {
      margin-bottom: 24px;
    }

    .projects>ol>li>header {
      display: flex;
      justify-content: space-between;
    }

    .projects>ol>li h3 {
      display: inline-block;
    }
  </style>
  <style>
    .skills {}

    #skills {

      width: 500px;
      height: 270px;
    }
    @media print {
      #skills{display:none;}
    }


    .skills>.wrapper {
      display: flex;
      justify-content: space-between;
    }

    .skills>.wrapper>:first-child {
      margin-right: 24px;
    }

    .skills>.wrapper>#skills {}

    .skills>.wrapper>ul {
      color: #666;
    }

    .skills>.wrapper strong {
      color: #f60;
    }

    .skills>.wrapper>ul>li {
      line-height: 1.2;
      margin-bottom: 8px;
    }
  </style>
  <style>
    .openSource {}

    .openSource>h2 {}

    .openSource header img {
      position: absolute;
      top: 0;
      right: 0;
    }

    .openSource>ul {}

    .openSource>ul>li {
      margin-bottom: 24px;
    }

    .openSource header {
      position: relative;
      display: flex;
      justify-content: space-between;
    }

    .openSource h3 {}
  </style>
  <style>
    .jobs {}

    .jobs>h2 {}

    .jobs>ol {}

    .jobs>ol>li {
      margin: 12px 0;
    }

    .jobs header {
      display: flex;
      color: #666;
      margin-bottom: 12px;
    }

    .jobs header>h3 {
      font-size: 18px;
      color: #333;
    }

    .jobs header>h4 {
      margin-left: 1em;
      font-size: 18px;
    }

    .jobs header>span {
      font-size: 18px;
      margin-left: auto;
    }
  </style>



  <style>
    @media (max-width: 500px) {
      body {
        margin: 0;
      }

      article {
        width: auto;
        height: auto;
      }

      .bio img {
        display: none;
      }

      .skills .wrapper {
        flex-direction: column;
      }

      #skills {
        width: auto;
      }
      .jobs header{
        flex-direction: column;
      }
      .jobs header >h3,
      .jobs header >h4,
      .jobs header >span {
        margin: 0;
      }
    }
  </style>
</head>

<body>
  <article>

<!--    基本信息-->
    <section class="bio">
      <h1>夏振华</h1>
      <img src="./images/logo.jpg" alt="" width="100" height="100">
      <p>
        男 | 20岁 | 前端开发 | 南昌 | 已离职
      </p>
      <p>
        手机：<a class="noLine" href="tel:15797782051">15797782051</a> | 微信：zhenhua12312 | 邮箱：1962408497@qq.com
      </p>
    </section>

<!--    学历信息-->
    <section class="education">
      <h2>教育经历</h2>
      <p>
        <span><time>2017年</time>~<time>2020年</time></span>
        江西科技师范大学 电子商务 专科</p>
    </section>

<!--    掌握的技能-->
<section class="skills">
  <h2>技能</h2>
  <div class="wrapper">
<!--    <div id="skills"></div>-->
    <ul>
      <li>设计出身，<strong>熟练掌握各种切图技巧与雪碧图的制作</strong>，能够完美还原设计稿</strong></li>
      <li>熟悉<strong> jQuery / Fullpage / Zepto / Swiper </strong>等常用工具库 </li>
      <li>熟悉<strong>响应式技术</strong>，可以使用原生或框架快速搭建响应式页面</li>
      <li>熟悉<strong>前后端分离</strong>技术，包括 AJAX、跨域、前端路由、Cookie、Session 等</li>
      <li>熟练掌握 <strong>Vue全家桶</strong>的使用，包括 VueCli、VueRouter、Vuex 等</li>
      <li>熟悉<strong>React全家桶</strong>的使用，包括 create-react-app、ReactRouter、Redux 等</li>
      <li>熟悉 ES6，包括 let / Promise / await / 析构赋值</li>
      <li>精通各种<strong>设计软件</strong>，有设计基础</li>
      <li>了解微信小程序开发</li>
    </ul>
  </div>
</section>





<!--    工作经历-->
    <section class="jobs">
      <h2>工作经历</h2>
      <ol>
        <li>
          <header>
            <h3> 南昌房快卖网络科技有限公司 </h3>
            <h4> 网页设计 </h4>
            <span><time>2019年6月</time>~<time>2020年7月</time></span>
          </header>
          <ul>
            <li>
              独立负责公司的团购活动专题的设计与制作
            </li>
            <li>
              负责公司平面图片的设计与制作
            </li>
            <li>
              作为前端骨干，负责给前端较弱的同事进行培训，提高其前端开发工作效率
            </li>
          </ul>
        </li>
      </ol>
    </section>

<!--    项目经历-->
    <section class="projects">
      <h2>项目经历</h2>
      <ol>
        <li>
          <header>
            <h3>简单记账</h3>
            <span>
              <a target="_blank" href="https://gitee.com/zhenhua4207/accounts-website">源码预览</a>
              <a target="_blank" href="http://sq578657906.gitee.io/alipay-account-website/#/account">项目预览</a>
            </span>
          </header>
          <p>
            基于 <strong>Vue、VueCli、VueRouter、Vuex</strong> / <strong>TypeScript</strong> 的记账项目。

          </p>
          <p>
            一个网页端的记账项目，用来记录自己消费记录，顺便加深一下对 Vue 全家桶的应用，简单使用了 TypeScript
          </p>
          <p>
            制作过程让我对模块化开发有了新的理解，对 Vuex 的数据管理有了更具体的认识，对 TypeScript 有了初步的了解
          </p>
        </li>
        <li>
          <header>
            <h3>酷 UI</h3>
            <span>
              <a target="_blank" href="https://github.com/huage404/KUI">源码预览</a>
            </span>
          </header>
          <p>
            基于 <strong>Vue</strong>开发的一个 UI 组件库，样式处理用的是 sass，使用 parcel 进行打包，单元测试用的是 chai.js 已发布到 npm
          </p>
          <p>
            可以通过 npm install --save kui-demo 下载使用
          </p>
          <p>
            制作过程让我对Vue组件开发有了新的理解，包括分析用户使用行为，UI 设计，如何使用单元测试规范自己的代码，编写项目文档等
          </p>
          <p>
            官网计划使用 vuepress 搭建，目前仍在开发中
          </p>
        </li>
        <li>
          <header>
            <h3>南昌地铁房盘点</h3>
            <span>
              <a target="_blank" href="https://cs.loupan.com/default/zhuanti2/cs/2020/csdtyxlp55/">项目预览</a>
            </span>
          </header>
          <p>
            一个展示南昌部分地铁沿线楼盘的<strong>响应式</strong>页面，在 PC 端和移动端均能展示

          </p>
          <p>
            经过此项目让我掌握了响应式页面的另一种实现思路
          </p>
        </li>
        <li>
          <header>
            <h3>元旦节M端专题</h3>
            <span>
              <a target="_blank" href="https://nc.loupan.com/default/zhuanti2/nc/2020/2020yuandan/">项目预览</a>
            </span>
          </header>
          <p>
            项目使用 <strong>webpack</strong>，JS 使用的版本为 <strong>ES6</strong>，动画部分主要用 <strong>CSS3</strong> 的 <strong>animation</strong> 实现
          </p>
          <p>
            项目由设计到制作均为本人独立完成，项目使用 rem 进行移动端适配，配合 JS 动态设置 html 的 font-size
          </p>
          <p>
            加深了对 webpack 的使用熟练度，简单的接触到表驱动的概念
          </p>
        </li>
        <li>
          <header>
            <h3>双十一购房专题</h3>
            <span>
              <a target="_blank" href="https://nc.loupan.com/default/zhuanti2/nc/2019/guoqing011/">项目预览</a>
            </span>
          </header>
          <p>
            国庆期间南昌楼盘网推出的用于展示优惠楼盘的专题
          </p>
          <p>
            项目由设计到制作均为本人独立完成，项目使用 rem 进行移动端适配
          </p>
        </li>

      </ol>
    </section>







<!--    开源项目-->
    <section class="openSource">
      <h2>开源项目</h2>
      <ul>
        <li>
          <header>
            <h3>自己写的 DOM 库</h3>
            <a target="_blank" href="https://gitee.com/zhenhua4207/myDom">源码链接</a>
          </header>
          <p>实现了元素选择、元素创建、<strong>事件委托</strong>、滑动手势等常见功能</p>
        </li>
        <li>
          <header>
            <h3>微金所响应式</h3>
            <span>
              <a target="_blank" href="https://gitee.com/zhenhua4207/weijinsuo">源码链接</a>
              <a target="_blank" href="http://zhenhua4207.gitee.io/weijinsuo/">项目预览</a>
            </span>
          </header>
          <p>这是我在学习 <strong>Bootstrap</strong> 是做的一个响应式网站</p>
        </li>
        <li>
          <header>
            <h3>简单驿站</h3>
            <span>
              <a target="_blank" href="https://gitee.com/zhenhua4207/jiandanyizhan">源码链接</a>
              <a target="_blank" href="http://zhenhua4207.gitee.io/jiandanyizhan/">项目预览</a>
            </span>
          </header>
          <p>我在学习 <strong>Local Storage</strong> 时做的浏览器搜索页面</p>
        </li>
      </ul>
    </section>





    <section class="others">
      <h2>其他链接</h2>
      <ul>
        <li><a href="https://juejin.im/user/5cef2ed55188255ef970272d/posts">我的博客</a>，目前已有 23 篇技术文章</li>
<!--        <li><a href="https://github.com/huage404">我的 GitHub</a>，过去三个月有 200 次提交</li>-->
      </ul>
    </section>



  </article>
  <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
  <script src="./main.js"></script>
</body>

</html>
